<template>
  <div class="mod-home" >‘
    <div class="mod-log">
      <el-form :inline="true" ref="dataForm" :model="dataForm">
        <el-form-item label="服务">
          <el-select   v-model="dataForm.application"
                       @change="filter()" placeholder="选择服务">
            <el-option  v-for="(app,index) in applicationList" v-bind="app"   > </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日志级别">
          <el-select v-model="dataForm.level" @change="filter()" placeholder="选择日志级别">
            <el-option label="全部" value=""></el-option>
            <el-option label="INFO" value="INFO"></el-option>
            <el-option label="ERROR" value="ERROR"></el-option>
            <el-option label="WARN" value="WARN"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日志开关">
          <el-switch
            v-model="dataForm.switch"
            active-color="#13ce66"
            inactive-color="#ff4949" @change="setLogOpen()">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="clean()">清空日志</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mod-log" style=" max-height: 850px;overflow-x:auto;" ref="mianscroll">
      <div v-for="(log, index) in filterList" :key="index">
        <p>
          <span style="color: #9e0303;font-size: 20px">【{{ log.applicationName }}】</span>
          <span style="color: #333333;font-size: 20px">{{ log.time }}</span>
          <span v-if="log.level === 'INFO' " style="color: #3b97d7;font-size: 20px"> 【{{ log.level }}】</span>
          <span v-if="log.level === 'ERROR'" style="color: #9e0303;font-size: 20px"> 【{{ log.level }}】</span>
          <span v-if="log.level === 'WARN'" style="color: #f3e508;font-size: 20px"> 【{{ log.level }}】</span>
          <span style="color: #aa7700;font-size: 20px"> {{ log.threadName }}</span>
          <span style="color: #11C26D;font-size: 20px"> {{ log.loggerName }}</span>
          <span style="color: #333333;font-size: 20px" v-html="log.msg"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        level: "",
        application:"",
        switch: false,
      },
      applicationList:[{value:"",label:"全部"}],
      applicationNames:[],
      dataList: [],
      filterList: [],
    }
  },
  computed: {
    onEvent() {
      return this.$websocket.getters.onEvent("socket");
    },
  },
  created() {
    this.bottomScrollClick();
    this.getLogOpen()
  },
  methods: {
    topScrollClick() {
      this.$nextTick(() => {
        let scrollEl = this.$refs.mianscroll;
        scrollEl.scrollTo({top: 0, behavior: 'smooth'});
      });
    },
    bottomScrollClick() {
      this.$nextTick(() => {
        let scrollEl = this.$refs.mianscroll;
        scrollEl.scrollTo({top: scrollEl.scrollHeight, behavior: 'smooth'});
      });
    },
    filter: function () {
      if (this.dataForm.level === "" && this.dataForm.application === "" ) {
        this.filterList = this.dataList;
        return;
      }
      this.filterList = this.dataList.filter(e => {
        if (this.dataForm.application === "" && e.level === this.dataForm.level) {
          return e;
        }
        if (this.dataForm.level === "" && e.applicationName === this.dataForm.application ) {
          return e;
        }
        if (e.applicationName === this.dataForm.application && e.level === this.dataForm.level) {
          return e;
        }
      })
      this.bottomScrollClick();
    },
    clean: function () {
      this.filterList = [];
      this.dataList = [];
    }, getLogOpen() {
      this.$http({
        url: this.$http.adornUrl('admin/api/sys/log/console/get'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.dataForm.switch = data.data
          // alert(this.dataForm.switch)
          // this.$refs['dataForm'].resetFields()
        }
      })
    },
    setLogOpen() {
      this.$http({
        url: this.$http.adornUrl('admin/api/sys/log/console/set'),
        method: 'post',
        data: this.$http.adornData({
          flg: this.dataForm.switch
        })
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.$message({
            message: data.msg,
            type: 'success',
            duration: 1500
          })
        }
      })
    }
  },

  watch: {
    onEvent: function (data) {
      var msg = JSON.parse(data.data);
      console.log(msg)
      if (msg.type === 1) {
        if (this.dataList.length > 10000) {
          this.dataList = this.dataList.splice(0, 1)
        }
        if (this.filterList.length > 10000) {
          this.filterList = this.filterList.splice(0, 1)
        }
        if (msg.content.level === this.dataForm.level || this.dataForm.level === "") {
          this.filterList.push(msg.content)
        }
        if(this.applicationNames.indexOf(msg.content.applicationName) ===-1 ){
          this.applicationNames.push(msg.content.applicationName)
          this.applicationList.push({value:msg.content.applicationName,label:msg.content.applicationName});
        }
        this.dataList.push(msg.content);
        this.bottomScrollClick();
      }
    }
  }
}
</script>

<style>
  /*.mod-home {*/
  /*  min-height: 920px;*/
  /*  width: 100%;*/
  /*  background: url(~@/assets/img/login_bg.jpg) no-repeat;*/
  /*  background-size: auto 100%;*/
  /*}*/
</style>

